<%= tag.public_send tag_name,
  **html_attrs,
  id: id,
  class: [
    html_attrs[:class],
    "relative group mb-6 scroll-mt-6",
    ("h-0 invisible pointer-events-none !m-0" if hidden?),
  ] do %>  
  <span class="flex items-center relative cursor-default" x-data="{copied: false, copyTimeout: null}"
    x-on:click.stop="const url = `${location.protocol}//${location.host}${location.pathname}#<%= id %>`;
      navigator.clipboard.writeText(url).then(() => {
        copied = true;
        if (copyTimeout) clearTimeout(copyTimeout);
        setTimeout(() => { copied = false }, 1000)
      });
    ">
    <a
      href="#<%= id %>"
      class="no-underline font-bold p-1 absolute left-0 -translate-x-full top-[5px] lg:top-[3px]"
      data-turbo="false">
      <%= icon :link,
        class: "!invisible group-hover:!visible w-[0.85rem] h-[0.85rem] lg:w-4 lg:h-4 transition opacity-40 hover:opacity-100 transition relative left-px lg:-left-px",
        html: {
          "x-show": "!copied"
        } %>
      <%= icon :check,
        class: "w-[0.85rem] h-[0.85rem] lg:w-4 lg:h-4 relative left-px lg:-left-px text-emerald-800",
        html: {
          "x-show": "copied"
        } %>
    </a>
    <% unless step.nil? %>
      <span class="block py-1 px-2 leading-none bg-indigo-100 text-indigo-700 font-mono rounded-md mr-2" style="font-size: 0.7em"><%= step %></span>
    <% end %>
    <span class=""><%= content %></span>
  </span>
<% end %>
